<template>
	<div class="top_search">
		<a-form :model="searchForm" style="display: flex">
			<a-form-item label="" class="form_item">
				<a-select style="width: 120px;" v-model:value="searchForm.type" placeholder="请选择" :options="balanceType"
					allowClear></a-select>
				<a-input style="width: 120px;" placeholder="请输入" v-model:value="searchForm.value" allowClear />
			</a-form-item>
			<a-form-item label="日期筛选" style="width: 300px" class="form_item">
				<a-range-picker @change="handleDateChange" v-model:value="timeRange" allowClear />
			</a-form-item>
			<a-form-item label="" class="form_item">
				<a-button type="primary" @click="queryThis('query')">
					<template #icon>
						<SearchOutlined />
					</template>
					查询
				</a-button>
				<a-button type="default" style="margin-left: 10px" @click="queryThis('reset')">
					<template #icon>
						<ReloadOutlined />
					</template>
					重置
				</a-button>
			</a-form-item>
		</a-form>
	</div>

	<div class="table_con">
		<a-table :loading="tableLoading" :pagination="pageInfo" :dataSource="dataSource" :columns="columns"
			@change="handleTableChange">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'operate'">
					<a-button @click="lookDetail" type="link">查看详情</a-button>
				</template>
			</template>
		</a-table>
	</div>

	<operateDetail :visible="detailVisible" @close="detailVisible = false" />
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed
	} from "vue";
	import {
		DownOutlined,
		UpOutlined,
		SearchOutlined,
		ReloadOutlined,
	} from "@ant-design/icons-vue";
	import dayjs from "dayjs";
	import request from "../../../common/utils/request";
	import {
		message
	} from "ant-design-vue";
	import operateDetail from "./modules/operateDetail.vue";
	const initialParams = {
		/**
		 * 余额类型
		 */
		type: null,
		/**
		 * 业务单号
		 */
		value: "",
		/**
		 * 交易时间-开始
		 */
		start_time: "",
		/**
		 * 交易时间-结束
		 */
		end_time: "",
	};
	export default defineComponent({
		name: "operateLog",
		components: {
			DownOutlined,
			UpOutlined,
			SearchOutlined,
			ReloadOutlined,
			operateDetail,
		},
		setup() {
			const state = reactive({
				detailVisible: false,
				tableLoading: false,
				dataSource: [{
					user_id: '111',
					username: '111',
					operate_man: '111',
					operate_path: '111',
					operate_type: '111',
					operate_at: '111',
				}],
				timeRange: null,
				pageInfo: {
					page: 1,
					pageSize: 10,
					total: 0,
				},
				searchForm: {
					...initialParams,
				},
				transitionType: [],
				balanceType: [],
				visibleExport: false,
				columns: [{
						title: "用户ID",
						dataIndex: "user_id",
						key: "user_id",
					},
					{
						title: "用户名",
						dataIndex: "username",
						key: "username",
					},
					{
						title: "操作人",
						dataIndex: "operate_man",
						key: "operate_man",
					},
					{
						title: "操作路径",
						dataIndex: "operate_path",
						key: "operate_path",
					},
					{
						title: "操作类型",
						dataIndex: "operate_type",
						key: "operate_type",
					},
					{
						title: "操作时间",
						dataIndex: "operate_at",
						key: "operate_at",
					},
					{
						title: "操作",
						dataIndex: "operate",
						key: "operate",
					},
				],
			});

			const handleTableChange = ({
				current,
				pageSize
			}) => {
				state.pageInfo.pageSize = pageSize;
				state.pageInfo.page = current;
				getTableList();
			};

			const handleDateChange = (date, dateString) => {
				state.searchForm.start_time = dateString[0];
				state.searchForm.end_time = dateString[1];
			};

			const getTableList = () => {
				let params = {};
				// state.tableLoading = true;
				Object.assign(params, state.pageInfo);
				Object.assign(params, state.searchForm);
				// request
				// 	.get("/work_ai", "/user/shotstack/user/billing/list", params)
				// 	.then((res) => {
				// 		state.dataSource = res.result.data;
				// 		state.pageInfo.total = res?.result?.total;
				// 		state.tableLoading = false;
				// 	})
				// 	.catch((err) => {
				// 		state.tableLoading = false;
				// 	});
			};

			const queryThis = (type) => {
				if (type == "query") {
					getTableList();
				} else {
					state.pageInfo = {
						page: 1,
						pageSize: 10,
						total: 0,
					};
					state.searchForm = {
						...initialParams,
					};
					state.timeRange = null;
					getTableList();
				}
			};
			
			const lookDetail = () => {
				state.detailVisible = true
			}
			
			getTableList();

			return {
				...toRefs(state),
				handleTableChange,
				getTableList,
				queryThis,
				handleDateChange,
				lookDetail
			};
		},
	});
</script>

<style lang="less" scoped>
	.form_item {
		margin-left: 10px;
		width: 250px;
		&:nth-child(1) {
			margin-left: 0;
		}
	}

	.export {
		text-align: right;
		margin-bottom: 10px;
	}
</style>